require('../../assets/css/reset.css')
require('../../assets/css/normalize.css')
require('../../assets/iconf/iconfont.css')
require('./datum.less')


let axios = require('axios')
// 获取登录时储存的用户信息
let user = JSON.parse(localStorage.getItem('login'))

// 设置axios请求头,添加token
axios.defaults.headers.authorization = "Bearer " + user.token;

let fanhui = document.querySelector('.fanhui')
let showSex = document.querySelector('#showSex')
let showBirthday = document.querySelector('#showBirthday')
let showCity = document.querySelector('#showCity')
let showCity2 = document.querySelector('#showCity2')
let showTou = document.querySelector('#showTou')
let upload = document.querySelector('#upload')
let headImg = document.querySelector('.headImg')
let nickname = document.querySelector('.nickname')
let qianming = document.querySelector('.qianming')
let sex = document.querySelector('.sex')
let brith = document.querySelector('.brith')
let city = document.querySelector('.city')
let city2 = document.querySelector('.city2')
let aa = document.querySelector('.aa')

fanhui.addEventListener('click', function () {
    location.href = './myen.html'
})





showSex.addEventListener('click', function () {
    weui.picker([{
        label: '男',
        value: 0
    }, {
        label: '女',
        value: 1
    },], {
        onChange: function (result) {
        },
        onConfirm: function (result) {
            sex.textContent = result[0].label
        },
        title: '性别'
    });
})

showBirthday.addEventListener('click', function () {
    weui.datePicker({
        start: new Date().getFullYear() - 100,
        end: new Date().getFullYear(),
        onChange: function (result) {
            console.log(result);
            brith.textContent = `${result[0].value}-${result[1].value > 9 ? result[1].value : '0' + result[1].value}-${result[2].value > 9 ? result[2].value : '0' + result[2].value}`
        },
        title: '生日'
    });
})
let xiaoTou = ''
showCity.addEventListener('click', function () {
    axios.get('http://47.96.154.185:3701/api/shared/province')
        .then(function (res) {
            console.log(res);
            if (res.data.errno == 0) {
                let arr = res.data.data.map(function (item, index) {
                    return { label: item.name, value: item.id }
                })
                console.log(arr);
                weui.picker(arr, {
                    onConfirm: function (result) {
                        city.textContent = result[0].label
                        xiaoTou = result[0].value
                        city2.textContent = '请选择'
                    },
                    title: '省份'
                });
            }
        })
})
let ee =''
showCity2.addEventListener('click', function () {
    if (xiaoTou != '') {
        axios.get(`http://47.96.154.185:3701/api/shared/city?provinceId=${xiaoTou}`)
            .then(function (res) {
                console.log(res);
                if (res.data.errno == 0) {
                    let arr = res.data.data.map(function (item, index) {
                        return { label: item.name, value: item.id }
                    })
                    weui.picker(arr, {
                        onConfirm: function (result) {
                            city2.textContent = result[0].label
                            ee = result[0].value
                        },
                        title: '城市'
                    });

                }
            })

    }
})


// 1.首先写一个input标签 type为file(文件上传框)
//  2.给文件上传框添加change事件
let xiaoTou2 = ''
upload.addEventListener('change', function () {
    // 3.上传的文件是一个数组,里面只有一个对象 我们通过索引号将这个文件对象取出
    let file = upload.files[0];
    // 4.new FormData对象 文件对象
    const fd = new FormData()
    // 5.使用文件对象自带的append方法将收集到的文件添加至文件对象中 第一个参数是后台需要的属性名 第二个参数就是你的文件
    fd.append('file', file)
    // 6.发送请求 将文件传给后台
    axios.post('http://47.96.154.185:3701/api/shared/uploadPortrait1', fd)
        .then(function (res) {
            console.log(res);
            if (res.data.errno == 0) {
                // 7.后台会返回给你一个文件路径(放在服务器的哪个文件夹中),拼接了服务器地址之后 就可以找到文件
                headImg.src = `http://47.96.154.185:3701${res.data.data.url}`
            }
            xiaoTou2 = res.data.data.url
        })
})
// 8.获取头像框添加点击事件
showTou.addEventListener('click', function () {
    // 9.当用户点击头像框的时候 我们就使用代码点击input文件框 就可以执行以上步骤
    upload.click()
})

// 获取用户信息
let imgTou2 = ''
axios.get('http://47.96.154.185:3701/api/user/info')
    .then(function (res) {
        console.log(res);
        if (res.data.errno == 0) {
            xiaoTou2 = res.data.data.imgUrl
            imgTou2 = res.data.data.imgUrl
            res.data.data.imgUrl == '' ? '' : headImg.src = 'http://47.96.154.185:3701' + res.data.data.imgUrl
            nickname.value = res.data.data.nickName
            res.data.data.gender ? sex.textContent = res.data.data.gender : sex.textContent = '请选择'
            sex.textContent = res.data.data.gender == 0 ? '男' : '女'
            // res.data.data.gender == 0 ? sex.textContent ='男' : res.data.data.gender == 1 ? sex.textContent ='女'
            res.data.data.birthday ? brith.textContent = res.data.data.birthday : brith.textContent = '请选择'
            res.data.data.provinceId ? city.textContent = res.data.data.provinceId : city.textContent = '请选择'
            xiaoTou = res.data.data.provinceId
            res.data.data.cityId ? city2.textContent = res.data.data.cityId : city2.textContent = '请选择'
            qianming.value = res.data.data.sign
            // 如果用户数据查取成功 那就调用省份接口
            axios.get('http://47.96.154.185:3701/api/shared/province')
                .then(function (resTwo) {
                    if (resTwo.data.errno == 0) {
                        let arr = resTwo.data.data.filter(function (item, index) {
                            return item.id == res.data.data.provinceId
                        })
                        console.log(arr);
                        city.textContent = arr[0].name
                    }
                })
            axios.get(`http://47.96.154.185:3701/api/shared/city?provinceId=${res.data.data.provinceId}`)
                .then(function (resTwo2) {
                    if (resTwo2.data.errno == 0) {
                        let arr = resTwo2.data.data.filter(function (item, index) {
                            return item.id == res.data.data.cityId
                        })

                        city2.textContent = arr[0].name
                    }
                })
            //     .then(function (resTwo2) {
            //         if (resTwo2.data.errno == 0) {
            //             let arr = resTwo2.data.data.filter(function (item, index) {
            //                 return item.id == res.data.data.cityId
            //             }
            //             )
            //  city.textContent = arr[0].name
        }
    })

axios.post('http://47.96.154.185:3701/api/user/changeInfo')
    .then(function (res) {

    })

let btn = document.querySelector('.btn')




btn.addEventListener('click', function () {
    let add = {
        // 昵称
        nickName: nickname.value,
        // 性别
        gender: sex.textContent == '男' ? 0 : 1,
        // 省份id
        provinceId: xiaoTou,
        // 城市id
        cityId: ee,
        // 生日
        birthday: brith.textContent,
        // 头像地址
        imgUrl: xiaoTou2,
        // 签名
        sign: qianming.value
    }

    axios.post('http://47.96.154.185:3701/api/user/changeInfo', add)
        .then(

        )

    console.log(nickname);
    console.log(add);
})

qianming.addEventListener('input', function () {
    aa.textContent = qianming.value.length
    // if(qianming.value.length >= 20){
    //     qianming.value = qianming.value.slice(0,19)
    // }
})